import * as echarts from 'echarts';
import { defineComponent, nextTick, onMounted, PropType, reactive, ref, watch } from 'vue';
import './index.scss';
//指标库饼图业务组件
const IndexInfoPiechart = defineComponent({
  name: 'IndexInfoPiechart',
  props: {
    percentVal: {
      type: Number as PropType<number>,
      default: 0
    }
  },
  setup: (props) => {
    const chart = ref<any>();
    const state = reactive({
      init: () => {
        let echartDiv = document.getElementById('indexInfoPieChart') as HTMLElement;
        echartDiv.setAttribute('_echarts_instance_', '');
        echartDiv.innerHTML = "";
        chart.value = echarts.init(echartDiv);
      },
      updateChart: (e: number) => {
        chart.value.setOption({
          title: {
            show: true,
            text: e + '%',
            x: 'center',
            y: 'center', // 通过x,y将标题(进度)定位在圆环中心
            textStyle: {
              fontSize: '20',
              color: 'black',
              fontWeight: '400'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{d}%',
            show: false
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            show: false
          },
          series: {
            name: '',
            type: 'pie',
            radius: ['60%', '85%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: e,
                name: '',
                itemStyle: {
                  color: '#3C6EFF'
                }
              },
              {
                value: 100 - e,
                name: '',
                itemStyle: {
                  color: '#EFF1F7'
                }
              }
            ]
          }
        });
      }
    });
    onMounted(() => {
      nextTick(() => {
        state.init();
        state.updateChart(props.percentVal);
      });
    });
    watch(() => { props.percentVal }, (val: any) => {
      state.updateChart(val);
    });
    return () => {
      return (<div class="index-info-piechart-wrap">
        <div class="chart-wrap" id="indexInfoPieChart"></div>
        <footer class="footer-wrap">
          <el-link class="goto-improve" style="display: none">
            去完善
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-link>
        </footer>
      </div>);
    }
  }
});

export default IndexInfoPiechart;